<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


<script src="http://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
</head>
<body>
	<input type="text" name="bname" placeholder="please input book name">
	<input type="number" name="price" placeholder="please input book price">
	<button class="btn btn-primary" id="addBook">add book</button>
<table id="books" class="table table-striped table-hover">
<tr><th>id</th><th>bname</th><th>price</th><th>operate</th></tr>
</table>


<script type="text/javascript">
	
	
	function addBook(book){
		var btn=$("<button>del</button>");
		btn.addClass("btn btn-warning");
		btn.on("click",function(){
			var ct=$(this);
			var id=$(this).parent("tr").children(":first").text();
			$.ajax({
				url:"book/"+id,
				type:"DELETE"
			})
			.done(function(d){
				ct.parent("tr").remove();
			})
			
		});
		
		$("<tr></tr>")
		.append($("<td></td>").text(book.id))
		.append($("<td></td>").text(book.bname))
		.append($("<td></td>").text(book.price))
		.append(btn)
		.appendTo($("#books"));
	}
	
	
	
	$(function(){	
		
			$.ajax({
				url:"book",
				type:"GET"
			})
			.done(function(books){
				for(var i=0;i<books.length;i++){
					var book=books[i];
					addBook(book);
				}
			});
			
	$("#addBook").on("click",function(){
		var bname=$("input[name=bname]").val();
		var price=$("input[name=price]").val();
		var book={bname:bname,price:price};
		$.ajax({
				url:"book",
				type:"POST",
				data:JSON.stringify(book),
				headers:{"Content-Type":"application/json"}
			})
			.done(function(book){
				addBook(book);
			})
	});
			

	});
	
</script>
</body>
</html>